<template>
	<view>
		<!-- 文章列表 -->
		<common-list :newPost="postList" :type="wxSet.index_style" :wx_video="wxSet.wx_video"></common-list>

		<!-- 没有内容 -->
		<view class="no-datalist" v-if="is_data">
			<view class="no-img">
				<image class="fengrui-img" src="../../static/data/data-no.svg" mode=""></image>
			</view>
			<view class="no-text">
				您搜索的世界不存在！或者和小姐姐跑了......
			</view>
		</view>

		<!-- loading加载图 -->
		<block v-if="page > 1">
		  <loading-lis :listsLoading="listsLoading"></loading-lis>
		</block>
		
		<!-- 占位符 -->
		<view style="height: 100rpx;"> </view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	let interstitialAd = null;
	export default {
		data() {
			return {
				// 文章列表
				postList: [],
				is_data: false,
				keyword: '',
				page: 1,
				listsLoading: true,
				// 基本配置
				wxSet: [],
			}
		},
		onLoad(option) {

			// 判断不同界面过的来数据
			// console.log(option)
			this.keyword = option.keyword
			this.jstag = option.jstag
			this.catepos = option.catepos

			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				// 判断数据类型 执行不同函数
				if (this.keyword) {
					this.getSearchList();
				} else if (this.jstag) {
					this.getTagAllList();
				} else {
					this.getCateposList();
				}
			}

			// 微信分享盆友圈
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif

		},
		// 监听触底
		onReachBottom() {
			this.page = this.page + 1;
			if (this.keyword) {
				this.getSearchList();
			} else if (this.jstag) {
				this.getTagAllList();
			} else if (this.catepos) {
				this.getCateposList();
			}
		},

		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			if (this.keyword) {
				var pathUrl = 'pages/list/list?keyword=' + this.keyword
			} else if (this.jstag) {
				var pathUrl = 'pages/list/list?jstag=' + this.jstag
			} else {
				var pathUrl = 'pages/list/list?catepos=' + this.catepos
			}
			return {
				title: this.wxSet.share_title,
				imageUrl: this.wxSet.share_title_url,
				path: pathUrl
			}
		},

		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				// 判断数据类型 执行不同函数
				if (this.keyword) {
					this.getSearchList();
				} else if (this.jstag) {
					this.getTagAllList();
				} else {
					this.getCateposList();
				}
				
				// 加载插屏广告
				if(this.wxSet.wx_chaping != ''){
					this.getWxchaAd();
				}
				
				
			},


			// 搜索数据
			getSearchList() {
				if (this.wxSet.categ_filter == '') { // 判断是否有塞选文章
					var filter = 0;
				} else {
					var filter = this.wxSet.categ_filter;
				}
				API.getSearchList([this.keyword],[this.page],[filter]).then((res) => {
					if (res.data.message == '请求的页码大于总页数。') {
						this.listsLoading = false;
					} else if (res.data.length == '') {
						this.is_data = true;
					} else {
						this.postList = this.postList.concat(res.data);
					}
					console.log('搜索数据',res.data)
				})
			},

			// 标签数据
			getTagAllList() {
				if (this.wxSet.categ_filter == '') { // 判断是否有塞选文章
					var filter = 0;
				} else {
					var filter = this.wxSet.categ_filter;
				}
				API.getTagAllList([this.jstag],[this.page],[filter]).then((res) => {
					if (res.data.message == '请求的页码大于总页数。') {
						this.listsLoading = false;
					} else if (res.data.length == '') {
						this.is_data = true;
					} else {
						this.postList = this.postList.concat(res.data);
					}
					console.log('标签数据',res.data)
				})
			},

			// 文章分类数据
			getCateposList() {
				API.getCategoList([this.catepos],[this.page]).then((res) => {
					if (res.data.message == '请求的页码大于总页数。') {
						this.listsLoading = false;
					} else if (res.data.length == '') {
						this.is_data = true;
					} else {
						this.postList = this.postList.concat(res.data);
					}
					console.log('文章分类数据',res.data)
				})
			},

			// 插屏广告数据
			getWxchaAd() {
				if (this.wxSet.wx_chaping != '') {
					// 在页面onLoad回调事件中创建插屏广告实例
					if (wx.createInterstitialAd) {
						interstitialAd = wx.createInterstitialAd({
							adUnitId: this.wxSet.wx_chaping
						})
						interstitialAd.onLoad(() => {})
						interstitialAd.onError((err) => {})
						interstitialAd.onClose(() => {})
					}

					// 在适合的场景显示插屏广告
					if (interstitialAd) {
						interstitialAd.show().catch((err) => {
							console.error(err)
						})
					}
				} else {
					console.log('微信没有配置插屏广告')
				}
			},
		}
	}
</script>

<style>
	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30rpx 0px;
		color: #ADADAD;
	}

	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
		margin-top: 40upx;
		font-size: 30upx;
	}

	.no-img {
		border-radius: 20rpx;
		overflow: hidden;
		height: 600upx;
		width: 500upx;
	}

	.no-datalist {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}


	/* 文章列表单排 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 10px;
		height: 16upx;
		line-height: 16upx;
		margin-left: 8upx;
	}

	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16upx;
	}

	.list-one-title {
		font-size: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28upx;
	}

	.list-one-img {
		height: 320upx;
		border-radius: 20upx;
		overflow: hidden;
	}

	.muen-sld-icon-display {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.muen-sld-icon {
		height: 40upx;
		width: 40upx;
		display: block;
		margin-right: 4upx;
		flex-shrink: 0;
	}

	.list-one-w {
		/* box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.16); */
		border-radius: 20upx;
		margin: 50upx 0upx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.container {
		padding: 40upx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	page {
		background-color: #F7F7F7;
		overflow-x: hidden;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		page {
			background: #161616;
		}

		.list-one-w {
			border: 1px #191919 solid;
			background: #202020;
		}
	}
</style>